import { merge } from 'lodash-es'
import { getViewportPx } from '@/utils/formatter'
const color = [
  '#FC5C53',
  '#47D147',
  '#F5BF49',
  '#5486F0',
  '#C763F2',
  '#3ba272',
  '#fc8452',
  '#9a60b4',
  '#ea7ccc'
]
const fontSize = getViewportPx(14)
// 折线图公共hook
export const useLineOptions = (data: any[], options?: any) => {
  const categoryAxis: any = {
    type: 'category',
    axisLabel: {
      fontSize: getViewportPx(16),
      interval: 0,
      // width: getViewportPx(50),
      overflow: 'breakAll'
    },
    axisLine: {
      show: true
    },
    axisTick: {
      show: true,
      alignWithLabel: true
    }
  }
  const valueAxis = {
    type: 'value',
    // name: '单位（人）',
    nameTextStyle: {
      fontSize: getViewportPx(12),
      color: '#aaa',
      padding: [0, 0, 0, 14]
    },
    axisLabel: {
      fontSize: getViewportPx(16)
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        // 使用深浅的间隔色
        color: ['#919191ab']
      }
    }
  }
  const xAxis = options?.xAxis?.type === 'value' ? valueAxis : categoryAxis
  const yAxis = options?.xAxis?.type === 'value' ? categoryAxis : valueAxis
  let onlyOneSeries = false // 是否只有一条series数据
  if (!options) {
    options = {}
  }
  if (!options?.series.length || options.series.length === 1) {
    onlyOneSeries = true
    if (!options.series) {
      options.series = [{}]
    }
    if (!options?.series?.[0]) {
      options.series[0] = {}
    }

    if (!options.series?.[0]?.data?.length) {
      options.series[0].data = [...data]
    }
    categoryAxis.data = options.series[0].data.map((item) => item.name)
  }

  let baseOptions: any = {
    color,
    title: {
      text: '',
      left: 'left',
      padding: [2, 2, 2, 2],
      textStyle: {
        fontSize: getViewportPx(16)
      }
    },
    tooltip: {
      confine: true,
      trigger: 'axis',
      // formatter: '{b}：{c}',
      axisPointer: {
        type: 'shadow'
      },
      textStyle: {
        fontSize
      }
    },
    grid: {
      // top: getViewportPx(30),
      left: '10%'
      // left: getViewportPx(72),
      // right: '5%',
      // bottom: getViewportPx(30)
    },
    legend: {
      bottom: getViewportPx(16),
      itemWidth: parseInt(getViewportPx(16, true)),
      itemHeight: parseInt(getViewportPx(16, true)),
      itemGap: parseInt(getViewportPx(22, true)),
      icon: 'circle',
      textStyle: {
        fontSize: getViewportPx(16),
        color: 'rgba(148, 148, 148, 1)'
      },
      right: getViewportPx(56)
    },
    xAxis,
    yAxis,
    series: options.series.map((seriesItem, seriesIndex) =>
      merge(
        {
          // name: '',
          type: 'line',
          barMaxWidth: getViewportPx(50, true),
          itemStyle: {
            borderRadius: options?.xAxis?.type === 'value' ? [0, 10, 10, 0] : [10, 10, 0, 0], // 圆角
            color(item) {
              return color[onlyOneSeries ? item.dataIndex : seriesIndex]
            }
          },
          label: {
            color: 'inherit',
            backgroundColor: 'transparent',
            fontSize: getViewportPx(12),
            show: true,
            position: options?.xAxis?.type === 'value' ? 'right' : 'top'
          },
          barMinHeight: getViewportPx(10, true)
        },
        seriesItem
      )
    )
  }
  baseOptions = merge(baseOptions, options)
  return {
    baseOptions
  }
}
